@charset "UTF-8";

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #efeeee;
    background-image: url("../img/rem.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#form {
    width: 500px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2),
    -18px -18px 30px rgba(255, 255, 255, 1);
    transition: all .2s ease-out;
}

#form:hover {
    cursor: pointer;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2),
    0 0 0 rgba(255, 255, 255, 0.8),
    inset 18px 18px 30px rgba(0, 0, 0, 0.1),
    inset -18px -18px 30px rgba(255, 255, 255, 1);
}

div#form h1 {

    color: #efeeee;
    font-family: 华文楷体;
    font-size: 24px;
    line-height: 10px;
}


div#form input[type="text"], div#form input[type="password"] {
    font-size: 18px;
    line-height: 25px;
    text-indent: 5px;
    outline: 0px;
    background-color: transparent;
}

div#form input[type="submit"] {
    width: 225px;
    height: 35px;
    font-size: 18px;
    background-color: #0f5795;
    color: #fff;
    letter-spacing: 10px;
    outline: 0px;
    border: 0px;
    border-radius: 5px;
    transition: all .2s ease-out;
}

div#form input[type="submit"]:hover {
    cursor: pointer;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2),
    0 0 0 rgba(255, 255, 255, 0.8),
    inset 18px 18px 30px rgba(0, 0, 0, 0.1),
    inset -18px -18px 30px rgba(255, 255, 255, 1);
}

a {
    margin: 0 auto;
    font-size: 0.85em;
    text-decoration: none;
    color: #8f8f8f;
}

a:hover {
    color: #fff;
}